<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
        <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext/ext-all.js"></script>
        <script type="text/javascript" src="../ext/ext-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../js/GridToExecl.js"></script>
    </head>   
    <body>   
        <script type="text/javascript">
            Ext.onReady(function () {

                var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am']];

                var store = new Ext.data.SimpleStore({
                    fields: [{
                        name: 'company'
                    }, {
                        name: 'price',
                        type: 'float'
                    }, {
                        name: 'change',
                        type: 'float'
                    }, {
                        name: 'pctChange',
                        type: 'float'
                    }, {
                        name: 'lastChange',
                        type: 'date',
                        dateFormat: 'n/j h:ia'
                    }]
                });
                store.loadData(myData);

                // create the Grid   
                var grid = new Ext.grid.GridPanel({
                    id: 'static-grid',
                    store: store,
                    renderTo: 'grid-example',
                    columns: [{
                        id: 'company',
                        header: "Company",
                        width: 160,
                        sortable: true,
                        dataIndex: 'company'
                    }, {
                        header: "Price",
                        width: 75,
                        sortable: true,
                        //renderer: 'usMoney',   
                        dataIndex: 'price'
                    }, {
                        header: "Change",
                        width: 75,
                        sortable: true,
                        dataIndex: 'change'
                    }, {
                        header: "% Change",
                        width: 75,
                        sortable: true,
                        dataIndex: 'pctChange'
                    }, {
                        header: "Last Updated",
                        width: 85,
                        sortable: true,
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                        dataIndex: 'lastChange'
                    }],
                    //stripeRows: true,   
                    //autoExpandColumn: 'company',   
                    height: 350,
                    width: 600,
                    title: 'Array Grid',
                    bbar: new Ext.Toolbar({
                        buttons: [{
                            text: '????Excel',
                            tooltip: '????Excel',
                            handler: onItemClick // °???????    
                        }]
                    })
                });

                function onItemClick(item) {

                    //                    Ext.ux.Grid2Excel.Save2Excel(grid);
                    var gridt = Ext.getCmp("static-grid");
                    var ddd = new ExtGridToExcel('文件名称', gridt, 3, 'ANSI');
                    var a = document.createElement('a');
                    document.body.appendChild(a);
                    a.hreflang = 'zh';
                    a.charset = 'ANSI';
                    a.type = "application/vnd.ms-excel";
                    a.href = 'data:application/vnd.ms-excel;base64,' + encode64(ddd.html);
                    a.target = '_blank';
                    a.download = 'excelexport' + '.xls';
                    a.click();

                }

                //grid.render('grid-example');   
                //grid.getSelectionModel().selectFirstRow();   
            });   
        </script>   
        <div id="grid-example">   
        </div>   
    </body>   
</html>  

